<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Permissions-Policy" content="autoplay=*, camera=*, fullscreen=*, microphone=*, clipboard-write=*, display-capture=*, geolocation=*">
  <title>Document</title>
  <script type="module" src="./index.ts"></script>
</head>

<body>
  <r-preview id="preview"></r-preview>
  <r-button type="primary" style="cursor: pointer;" onclick="uploadFile()">Choose File to Preview</r-button>
  <script>
    const uploadFile = () => {
      const preview = document.getElementById('preview');
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', '.docx,.pptx,.pdf,.xlsx');
      input.click();

      input.onchange = (e) => {
        const { files = [] } = input;
        if (files.length > 0) {
          const file = files[0];
          const url = URL.createObjectURL(file);
          preview.setAttribute('src', url);
        }
      };
    };
  </script>
</body>

</html>